/**
 * @author andrew
 */

 
// t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'}); 
//<li><div class='scene'>Scene <div class='hero' id='hero_"+i+"'>[hero] <p>*</p></div> number "+i+" </div></li>
/**
 var templates = {
 	test : new Ext.Template(
    	'<div name="{id}">',
        	'<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
    	'</div>'
	),
	scene: new Ext.Template.from("temp-scene")

 }
 
 **/
 
 
 




$(document).ready(function(){




var sb = {
	elements : [
		{
			name: "Conan",
			type: "human",
			label: "hero",
			desc: "a young hero"
		}
	],
	
	templates: {
		scene: new Ext.Template.from("temp-scene") //you can make templates from hidden textarea values
	},
	
	tasks: {
		clock: {
			run: function(){
				$("#clock").html(new Date().toGMTString())
			},
			interval: 1000 //1 second
		}
	},
	
	
	init: function(){
		console.log("sb init 2")
		
		sb.populateElements();
		sb.buildTabs();
		sb.populateStorylines();
		
		sb.testClock();
		
		//use .each to go through js objects 
		$.each(sb.elements, function(idx,val){
			console.log("Index: "+ idx)
			console.log("Value", val)
		})
		
		$('#arena').dialog({ 
			autoOpen: false,
			modal: true,
			hide: 'explode',
			show: 'drop' 
		});
		
		$("#play").live("click", function(){
			$("#arena").dialog('open');
		})
		
	},
	populateElements: function(){
		var elementList = $(".elements");
			elementList
				.html("");
		for(i=0; i< 10; i++){
			elementList
				.append($("<li class='element'><div>Element #"+i+"</div></li>").data("info",{id:i}))
				.end()
		}
		$(".element").draggable({ 
			opacity: 0.7, 
			helper: 'clone' 
		});
	},
	buildTabs:function(){
		$("#scenes").tabs();
	},
	populateStorylines: function(){
		var storyline = $(".storyline");
		storyline
			.html("");
		for(i=0; i<4; i++){
			storyline.append($(sb.templates.scene.apply({
				id:"hero_"+i,
				number: i,
				title: "Scene Number " + i
			})))
		}
		
		$(".hero").droppable({
			drop: function(event, ui){
				var me = $(this);
				$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
				console.log(ui.draggable.data("info").id)
				
				
					//$(this).effect("transfer", { to: $("div").eq(i) }, 1000);
				
				ui.draggable.hide("transfer", {
					to: me.eq(0),
					className: 'ui-effects-transfer'
				},1000, function(){
					$(this).hide();
				})
	
					
	
	
					
					
			}
		});	
	},
	testClock: function(){
		console.log("testclock")
		// Start a simple clock task that updates a div once per second

		Ext.TaskMgr.start(sb.tasks.clock);
	}
}

	
	
	
	
	
	




	//keep this last!
	sb.init();
});
